<template>
  <div class="budgetBox">
    <div class="out">
      <table class="table2" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
        <thead>
          <tr class="title">
            <th>项目支出科目</th>
            <th>项目总经费支出(万元)</th>
          </tr>
        </thead>
        <tbody class="">
          <tr v-for="(item, index) in data.table1" :key="index">
            <td>
              <span v-html="`&emsp;`.repeat(processArray(item.subjectName))"></span>{{ item.subjectName.substring(0,item.subjectName.length-9)}}
            </td>
            <td>
              <input
                :disabled="title.includes('详情')"
                type="text"
                @input="item.amount = NumberCheck(item.amount)"
                :maxlength="10"
                v-model="item.amount"
              />
            </td>
          </tr>
          <tr>
          <td>合计</td>
          <td>
            <input disabled type="text" min="0" placeholder="自动计算" :value="data.totalNum1" />
          </td>
        </tr>
        </tbody>
      </table>
      <table class="table3" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
        <thead>
          <tr class="title">
            <th>项目支出科目</th>
            <th>其中，从省财政科技专项资金支出(万元)</th>
          </tr>
        </thead>
        <tbody class="">
          <tr v-for="(item, index) in data.table2" :key="index">
            <td>
              <span v-html="`&emsp;`.repeat(processArray(item.subjectName))"></span>{{ item.subjectName.substring(0,item.subjectName.length-6) }}
            </td>
            <td>
              <input
                :disabled="title.includes('详情')"
                type="text"
                @input="item.amount = NumberCheck(item.amount)"
                :maxlength="10"
                v-model="item.amount"
              />
            </td>
          </tr>
          <tr>
          <td>合计</td>
          <td>
            <input disabled type="text" min="0" placeholder="自动计算" :value="data.totalNum2" />
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import { NumberCheck, processArray } from '@/utils/utils'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    const store = useStore()
    let projectForm = reactive(store.state.projectCenter.form)
    const input = ref()
    const data = reactive({
      table1: [{ subjectName: '', amount: '', subject: '' }],
      table2: [{ subjectName: '', amount: '', subject: '' }],
      totalNum1: 0,
      totalNum2: 0,
    })
    let subjectList1=['kjjhyzjfyzcys','kjjhysbfzcys','kjjh1sbgzfzcys','kjjh2sbszfzcys','kjjh3sbgzyzlfzcys',
    'kjjheclswfzcys','kjjh1xhclfzlfzcys','kjjh2cshyjgfsjcjfzcys','kjjh3yqzzyxdrldlfzcys',
    'kjjh4cbwxxxcbzscqswfzcys','kjjhsywswfzcys','kjjhhyfclfhgjhzjlzcys','kjjhsrlzyfzcys',
    'kjjh1lwfzcys','kjjh2zjzxfzcys','kjjhwqtzczcys','kjjhejjfyzcys','kjjhyjxzczcys',
    'kjjheglfzcys','kjjhsqtfyzcys',
    'kjjhyzjfysczzcys','kjjhysbfsczzcys','kjjh1sbgzfsczzcys','kjjh2sbszfsczzcys','kjjh3sbgzyzlfsczzcys',
    'kjjheclswfsczzcys','kjjh1xhclfzlfsczzcys','kjjh2cshyjgfsjcjfsczzcys','kjjh3yqzzyxdrldlfsczzcys',
    'kjjh4cbwxxxcbzscqswfsczzcys','kjjhsywswfsczzcys','kjjhhyfclfhgjhzjlsczzcys','kjjhsrlzyfsczzcys',
    'kjjh1lwfsczzcys','kjjh2zjzxfsczzcys','kjjhwqtzcsczzcys','kjjhejjfysczzcys','kjjhyjxzcsczzcys',
    'kjjheglfsczzcys','kjjhsqtfysczzcys']
    let subjectList2=['yzjfyzcyscdyf','ysbfzcyscdyf','sbgzfzcyscdyf','sbszfzcyscdyf','sbgzyzlfzcyscdyf',
    'eclswfzcyscdyf','xhclfzlfzcyscdyf','cshyjgfsjcjfzcyscdyf','yqzzyxdrldlfzcyscdyf',
    'cbwxxxcbzscqswfzcyscdyf','sywswfzcyscdyf','hyfclfhgjhzjlzcyscdyf','srlzyfzcyscdyf',
    'lwfzcyscdyf','zjzxfzcyscdyf','wqtzczcyscdyf','ejjfyzcyscdyf','yjxzczcyscdyf',
    'eglfzcyscdyf','sqtfyzcyscdyf',
    'yzjfysczzcyscdyf', 'ysbfsczzcyscdyf','sbgzfsczzcyscdyf','sbszfsczzcyscdyf','sbgzyzlfsczzcyscdyf',
    'eclswfsczzcyscdyf','xhclfzlfsczzcyscdyf','cshyjgfsjcjfsczzcyscdyf','yqzzyxdrldlfsczzcyscdyf',
    'cbwxxxcbzscqswfsczzcyscdyf','sywswfsczzcyscdyf','hyfclfhgjhzjlsczzcyscdyf','srlzyfsczzcyscdyf',
    'lwfsczzcyscdyf','zjzxfsczzcyscdyf','wqtzcsczzcyscdyf','ejjfysczzcyscdyf','yjxzcsczzcyscdyf',
    'eglfsczzcyscdyf','sqtfysczzcyscdyf']
    const filterTable = () => {
      projectForm.projectInvestmentsList = projectForm.projectInvestmentsList.filter((item) => {
        // return subjectList.includes(item.subject) && item.sfsybb==0
        return !('sfsybb' in item )|| item.sfsybb == 0
      }).sort((a,b)=>{
        return subjectList1.indexOf(a.subject)-subjectList1.indexOf(b.subject)
      }).map(item=>{
        if(item.subjectName.includes('科技计划')){
          item.subjectName = item.subjectName.slice(4)
        }
        return item
      })
      console.log(projectForm.projectInvestmentsList, 'projectForm.projectInvestmentsList')
    }    
    const filterTable2 = () => {
      projectForm.projectInvestmentsList = projectForm.projectInvestmentsList.filter((item) => {
        // return subjectList.includes(item.subject) && item.sfsybb==0
        return !('sfsybb' in item )|| item.sfsybb == 0
      }).sort((a,b)=>{
        return subjectList2.indexOf(a.subject)-subjectList2.indexOf(b.subject)
      }).map(item=>{
        if(item.subjectName.includes('重点研发')){
          item.subjectName = item.subjectName.slice(0,item.subjectName.length - 4)
        }
        return item
      })
      console.log(projectForm.projectInvestmentsList, 'projectForm.projectInvestmentsList')
    }
    //分开table数据
    const hadTable = () => {
      data.table1 = []
      data.table2 = []
      projectForm.projectInvestmentsList?.forEach((e: any) => {
        if (subjectList1.includes(e.subject)) {
          if(e.subjectName.includes('（省财政支出预算）')){
            data.totalNum1 += Number(e.amount)
            data.table1.push(e)
          }else{
            data.totalNum2 += Number(e.amount)
            data.table2.push(e)
          }
        }
      })
      console.log(data.table1, data.table2,'data.table1');
      data.totalNum1.toFixed(2)
      data.totalNum2.toFixed(2)
    }
    const hadTable2 = () => {
      data.table1 = []
      data.table2 = []
      projectForm.projectInvestmentsList?.forEach((e: any) => {
        if (subjectList2.includes(e.subject)) {
          console.log(e.subject,e.subjectName,e.subjectName.includes('（省财政支出预算）'),'e.subject');
          
          if(e.subjectName.includes('（省财政支出预算）')){
            data.totalNum1 += Number(e.amount)
            data.table1.push(e)
          }else{
            data.totalNum2 += Number(e.amount)
            data.table2.push(e)
          }
        }
      })
      console.log(data.table1, data.table2,'data.table1');
      data.totalNum1.toFixed(2)
      data.totalNum2.toFixed(2)
    }
    onMounted(() => {
      console.log(projectForm.ysbys,'projectForm.ysbys');
      if(projectForm.ysbys==0){
        filterTable2()
        hadTable2()
      }else if(projectForm.ysbys==1){
        filterTable()
        hadTable()
      }
    })
    watch(
      () => data.table1,
      () => {
        data.totalNum1 = 0
        data.table1?.forEach((e: any) => {
          data.totalNum1 += Number(e.amount)
        })
        data.totalNum1 = data.totalNum1.toFixed(2) as any
      },
      { deep: true }
    )
    watch(
      () => data.table2,
      () => {
        data.totalNum2 = 0
        data.table2?.forEach((e: any) => {
          data.totalNum2 += Number(e.amount)
        })
        data.totalNum2 = data.totalNum2.toFixed(2) as any
      },
      { deep: true }
    )
    onBeforeUnmount(() => {
      console.log('预算经费表格卸载了')
    })
    return {
      input,
      data,
      hadTable,
      NumberCheck,
      processArray
    }
  },
})
</script>

<style scoped lang="scss">
th {
  height: 25px;
}
.title {
  text-align: center;
  line-height: 36px;
  background-color: #f0f2f5;
  th {
    width: 200px;
  }
  th:nth-child(3) {
    width: 250px;
  }
}
.label {
  text-align: center;
  line-height: 28px;
}

input {
  outline: none;
  width: 90%;
  margin: 0 5%;
}
.budgetBox {
  width: 100%;
  // background-color: #492222;
  table {
    // float: left;
    line-height: 30px;
    td {
      height: 34px;
    }
  }
  justify-content: center;
  .input {
    margin: 0 10%;
    th:first-child {
      width: 500px;
    }
  }
  .out{
    display: flex;
    margin: 0 10%;
    margin-top:20px;
    th:first-child {
      width: 350px;
    }
    .table2{
      z-index: 100;
    }
    .table3{
      th:first-child {
        display: none;
      }
      tr td:first-child {
        display: none;
      }
    }
    th:nth-child(2) {
      width: 350px;
    }
  }
}
</style>
